import {Form, Input, InputNumber, Radio, Select, Button, Switch, Upload, Space} from "antd";
import {useState} from "react";
import { message } from "antd";
import { UploadOutlined } from '@ant-design/icons';


const RouteForm = ({record, formRef}) => {
  const [drawType, setDrawType] = useState(1);


  const normFile = e => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e === null || e === void 0 ? void 0 : e.fileList;
  };

  const onFormDrawTypeChange = (e) => {
    const t = e.target.value;
    if(t == 2){
      message.warning("暂不支持地图取点")
    }
    setDrawType(t);
  }
  const uploadProps = {
    name: 'file',
    multiple: false,
    maxCount: 1,
    progress: {
      strokeColor: {
        '0%': '#108ee9',
        '100%': '#87d068',
      },
      strokeWidth: 3,
      format: percent => percent && `${parseFloat(percent.toFixed(2))}%`,
    }
  };


  return (
    <>
      <Form.Item
        label="路线名"
        name="name"
        rules={[
          {
            required: true,
            message: '请输入路线名',
          }, {type: 'string', max: 32}
        ]}
      >
        <Input placeholder='请输入路线名' autoComplete="off"/>
      </Form.Item>

      <Form.Item
        label="最小速度"
        name="minVelocity"
        rules={[
          {
            required: true,
            message: '请输入最小速度',
          }
        ]}
      >
        <InputNumber min={0} max={200} placeholder='请输入最小速度' autoComplete="off" style={{ width: 200 }}/>
      </Form.Item>

      <Form.Item
        label="最大速度"
        name="maxVelocity"
        rules={[
          {
            required: true,
            message: '请输入最大速度',
          }
        ]}
      >
        <InputNumber min={0} max={200} placeholder='请输入最大速度' autoComplete="off" style={{ width: 200 }}/>
      </Form.Item>

      <Form.Item
        label="取点方式"
        name="drawType"
      >
        <Radio.Group buttonStyle="solid" defaultValue={"1"} onChange={onFormDrawTypeChange}>
          <Radio.Button value="1" checked>文件导入</Radio.Button>
          <Radio.Button value="2" disabled>地图取点</Radio.Button>
        </Radio.Group>
      </Form.Item>

      {drawType == 1 && (
        <Form.Item
          name="upload"
          label="Upload"
          valuePropName="fileList"
          getValueFromEvent={normFile}
          rules={[
            {
              required: true,
              message: '请选择需要上传的文件',
            }
          ]}
        >
            <Upload {...uploadProps}>
              <Button icon={<UploadOutlined />}>点击上传文件</Button>
            </Upload>
        </Form.Item>
      )}
    </>
  );

}

export default RouteForm;